<template>
  <div class="storeDetails">
    <Header title="店铺"></Header>
    <div class="content">
      <div class="img"></div>
      <div class="foodSort">
        <div class="sort"></div>
        <div class="name">
          {{ title }}
          <img :src="img" alt="" class="store-img">
        </div>

        <van-tabs color="#ffc400">
          <van-tab v-for="(item,index) in storeData" :key="index"
                   :title="item.name"
          >
            <FoodList :index="index" :foodData="item.data"></FoodList>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" dot></van-action-bar-icon>
      <van-action-bar-icon icon="cart-o" text="购物车"
                           :badge="store.state.cartList.length"
                           @click="goCart"
      ></van-action-bar-icon>
      <van-action-bar-button type="warning" text="加入购物车" @click="handleAddCart"></van-action-bar-button>
      <van-action-bar-button type="danger"
                             text="立即购买"
                             @click="goBuy"></van-action-bar-button>
    </van-action-bar>
  </div>
</template>

<script>
import {onMounted, reactive, toRefs} from 'vue';
import Header from '@/components/Header/index.vue'
import FoodList from "@/views/store/components/FoodList.vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import {Toast} from "vant";
import axios from "axios";
import {getApiStoreData} from '@/api/api'

export default {
  components: {
    Header,
    FoodList
  },
  setup() {
    let store_data = reactive({
      title: '鱼拿酸菜鱼',
      img: 'https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440',
      storeData: []
    })
    let store = useStore()
    // 添加购物车
    const handleAddCart = (type) => {
      const newArray = store.state.cartList || []
      const existingItems = new Set(); // 使用 Set 来存储已存在的商品，以便快速查找

      store_data.storeData.forEach(item => {
        item.data.items?.forEach(item => {
          item.children.forEach(item => {
            if (item.num > 0) {
              // 判断购物车中是否已经存在相同的商品
              const existingItem = newArray.find(cartItem => cartItem.id === item.id);
              if (existingItem) {
                // 如果存在，增加数量
                existingItem.num += item.num;
              } else {
                // 如果不存在，将商品添加到购物车
                newArray.push({...item});
              }
              // 记录已经添加的商品ID到 Set集合 中
              existingItems.add(item.id);
            }
          })
        })
      })

      if (newArray.length === 0) {
        Toast('请选择商品')
        return
      }

      console.log('添加进购物车的商品', newArray)
      console.log('购物车里的商品数据', store.state.cartList)
      store.commit('ADDCART', newArray)
      type === 'buy' ? goCart() : ''
    }

    const router = useRouter()
    const goCart = () => {
      router.push('/cart')
    }

    const goBuy = () => {
      handleAddCart('buy')
    }

    const init = () => {
      // axios.get('/store/getStoreData').then((res) => {
      //   const { code, data } = res.data
      //   if(code === 200){
      //     store_data.storeData = data
      //   }
      // })

      getApiStoreData().then(res => {
        store_data.storeData = res
      })
    }

    onMounted(() => {
      init()
    })
    // 将需要返回的响应式数据对象放在普通的 <script> 标签中
    return {...toRefs(store_data), handleAddCart, store, goCart, goBuy};
  }
}
</script>

<style lang="less" scoped>
.storeDetails {
  height: 100%;
  display: flex;
  flex-flow: column;

  .content {
    flex: 1;
    overflow-y: auto;

    .img {
      background: url("./assets/yuna.jpg") no-repeat center/cover;
      width: 100%;
      height: 150px;
    }

    .foodSort {
      height: 500px;
      background-color: #fff;
      margin-top: -30px;
      border-radius: 20px 20px 0 0;

      .sort {
        margin-top: 10px;
      }

      .name {
        display: flex;
        padding: 20px;
        justify-content: space-between;

        .store-img {
          width: 80px;
          height: 80px;
          border-radius: 10px;
          margin-top: -30px;
        }
      }
    }
  }
}
</style>